
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery/jquery-2.1.4.min.js"></script>
        <link rel="stylesheet" href="css/lunbo.css" />
	</head>

	<body>
		<div class="banner-3d">
			<div class="lunbo lunbo1">
			<img src="img/bg_left.png" class="beijing left tu1" />
			<img src="img/phone_left.png" class="phone left tu2" />
			<img src="img/erji_left.png" class="erji left tu3" />
			<ul class="page">
				<li class="yuandian "></li>
				<li class="yuandian yuanbianse yuanchange1"></li>
			</ul>
		</div>
		<div class="lunbo lunbo2">
			<img src="img/red-left.png" class="beijing left tu1" />
			<img src="img/word-left.png" class="phone left tu2" />
			<img src="img/time-left.png" class="erji left tu3" />
			<ul class="page">
				<li class="yuandian yuanbianse yuanchange2"></li>
				<li class="yuandian "></li>
			</ul>
		</div>
		</div>
		<script>
		var x1 = document.getElementsByClassName("lunbo")[0].offsetLeft;
		var y1 = document.getElementsByClassName("lunbo")[0].offsetTop;
		var x2;
		var index = 0;

		window.onload = function() {
			timer = setInterval(auto, 3000);
		}

		function auto() {
			index++;
			var q=index%2
			if(q==0){
				$(".lunbo1").fadeIn();
				$(".lunbo2").fadeOut();
			}else{
				$(".lunbo2").fadeIn();
				$(".lunbo1").fadeOut();
			}

		}
		$(".yuanchange2").click(function(){
			
			$(".lunbo1").fadeIn();
				$(".lunbo2").fadeOut();
		});
		$(".yuanchange1").click(function(){
			
			$(".lunbo2").fadeIn();
				$(".lunbo1").fadeOut();
		})

		function show() {
			$(".tu1").attr("src", imgarr[index][0])
			$(".tu2").attr("src", imgarr[index][1])
			$(".tu3").attr("src", imgarr[index][2])
		}

		$(".lunbo").mousemove(function(e) {
			check(e);

		})

		function check(e) {
			var a = e ? e : window.event;
			x2 = e.offsetLeft - x1;
			y2 = e.clientY - y1;
			var LorR = x2 - 610;
			var RorL = y2 - 250;
			var x3 = x1 + 610 - e.clientX;
			var y3 = y1 + 250 - e.clientY;
			if(LorR >= 0) {
				if(RorL >= 0) {
					$(".erji").css("left", -(-x3 / 1220 * 10) + "px");
					$(".beijing").css("transform", "perspective(3000px)rotateX(" + y2 / 500 * 8 + "deg)rotateY(" + -(-x2 / 1220 * 8) + "deg)");
					$(".phone").css("transform", "perspective(3000px)rotateX(" + y2 / 500 * 8 + "deg)rotateY(" + -(-x2 / 1220 * 9) + "deg)");
					$(".erji").css("transform", "perspective(3000px)rotateX(" + y2 / 500 * 8 + "deg)rotateY(" + -(-x2 / 1220 * 8) + "deg)");
				}

			} else {

				$(".erji").css("left", -(x3 / 1220 * 10) + "px");
				$(".beijing").css("transform", "perspective(3000px)rotateX(" + (y3 / 500 * 8) + "deg)rotateY(" + -x3 / 1220 * 8 + "deg)")
				$(".phone").css("transform", "perspective(3000px)rotateX(" + (y3 / 500 * 8) + "deg)rotateY(" + -x3 / 1220 * 9 + "deg)")
				$(".erji").css("transform", "perspective(3000px)rotateX(" + (y3 / 500 * 8) + "deg)rotateY(" + -x3 / 1220 * 8 + "deg)");
			
			}

		}
		//手机端效果
//		var phoneX,phoneY;
//		
//		$(".lunbo").ontouchstart(function(){
//			phoneX=event.pageX;
//			phoneY=event.pageY;
//		})
//		$(document).ontouchmove(DocumentTouch(){
//			var x= event.pageX-phoneX;
//			var y= event.pageY-phoneY;
//			$(".erji").css("left", -(x / 1220 * 10) + "px");
//				$(".beijing").css("transform", "perspective(3000px)rotateX(" + (y / 500 * 8) + "deg)rotateY(" + -x / 1220 * 8 + "deg)")
//				$(".phone").css("transform", "perspective(3000px)rotateX(" + (y / 500 * 8) + "deg)rotateY(" + -x / 1220 * 9 + "deg)")
//				$(".erji").css("transform", "perspective(3000px)rotateX(" + (y / 500 * 8) + "deg)rotateY(" + -x / 1220 * 8 + "deg)");
//		})
	</script>

	
	
	
	</body>
	

</html>